<script lang="ts" setup>
import { Delete, Edit, Message, QuestionFilled, Search, Plus, Download, Filter, User, Calendar, Clock } from "@element-plus/icons-vue";
import {reactive, ref, onMounted, computed, watch} from "vue";
import type { ComponentSize } from 'element-plus';
import { ElMessage, ElMessageBox, ElDialog, ElDropdown, ElDropdownMenu, ElDropdownItem, ElButton, ElSelect, ElOption, ElTable, ElTableColumn, ElTag, ElPagination, ElInput, ElDatePicker, ElPopconfirm, ElAlert, ElProgress } from 'element-plus';

// -------------------- 分页相关状态 --------------------
const currentPage1 = ref(1);
const currentPage2 = ref(1);
const currentPage3 = ref(1);
const currentPage4 = ref(1);
const pageSize2 = ref(10);
const pageSize3 = ref(10);
const pageSize4 = ref(10);

// -------------------- 组件外观状态 --------------------
const size = ref<ComponentSize>('default');
const background = ref(true);
const disabled = ref(false);

// -------------------- 表单数据模型 --------------------
const data = reactive({
  searchQuery: '',
  searchType: 'all',
  isAdvanced: false,
  selectedDept: null as number | null,
  selectedJob: null as string | null,
  selectedGender: null as string | null,
  dateRange: null as [string, string] | null,
  isExporting: false,
  exportProgress: 0,
  selectedEmployees: [] as any[],
  isBatchDeleteVisible: false,
  batchDeleteMessage: '',
  filterVisible: false,
  sortField: null as string | null,
  sortOrder: null as 'ascending' | 'descending' | null,
});

// 搜索类型选项
const searchTypes = [
  { label: '全部', value: 'all' },
  { label: '姓名', value: 'name' },
  { label: '用户名', value: 'username' },
  { label: '职位', value: 'job' },
  { label: '部门', value: 'dept' }
];

// 部门选项
const deptOptions = [
  { value: null, label: '全部部门' },
  { value: 1, label: '技术部' },
  { value: 2, label: '运营部' },
  { value: 3, label: '市场部' }
];

// 职位选项
const jobOptions = [
  { value: null, label: '全部职位' },
  { value: '1', label: '管理岗' },
  { value: '2', label: '技术岗' },
  { value: '3', label: '运营岗' },
  { value: '4', label: '高管' }
];

// 性别选项
const genderOptions = [
  { value: null, label: '全部性别' },
  { value: '男', label: '男' },
  { value: '女', label: '女' }
];

// -------------------- 员工数据列表 --------------------
const tableData = ref([
  // 员工数据保持不变...
  {
    id: 1,
    username: "jinyong",
    password: "123456",
    name: "金庸",
    gender: "男",
    job: "4",
    entrydate: "2000-01-01",
    dept_id: 2,
    create_time: "2025-06-11 08:30:00",
    update_time: "2025-06-11 15:45:00"
  },
  {
    id: 2,
    username: "zhangwuji",
    password: "123456",
    name: "张无忌",
    gender: "男",
    job: "2",
    entrydate: "2015-01-01",
    dept_id: 2,
    create_time: "2025-06-11 09:10:00",
    update_time: "2025-06-11 16:20:00"
  },
  {
    id: 3,
    username: "yangxiao",
    password: "123456",
    name: "杨逍",
    gender: "男",
    job: "2",
    entrydate: "2008-05-01",
    dept_id: 2,
    create_time: "2025-06-11 10:20:00",
    update_time: "2025-06-11 09:30:00"
  },
  {
    id: 4,
    username: "weiyixiao",
    password: "123456",
    name: "韦一笑",
    gender: "男",
    job: "2",
    entrydate: "2007-01-01",
    dept_id: 2,
    create_time: "2025-06-11 14:30:00",
    update_time: "2025-06-11 11:15:00"
  },
  {
    id: 5,
    username: "changyuchun",
    password: "123456",
    name: "常遇春",
    gender: "男",
    job: "2",
    entrydate: "2012-12-05",
    dept_id: 2,
    create_time: "2025-06-11 09:00:00",
    update_time: "2025-06-11 10:00:00"
  },
  {
    id: 6,
    username: "xiaozhao",
    password: "123456",
    name: "小昭",
    gender: "女",
    job: "3",
    entrydate: "2013-09-05",
    dept_id: 1,
    create_time: "2025-06-11 08:30:00",
    update_time: "2025-06-11 15:45:00"
  },
  {
    id: 7,
    username: "jixiaofu",
    password: "123456",
    name: "纪晓芙",
    gender: "女",
    job: "1",
    entrydate: "2005-08-01",
    dept_id: 1,
    create_time: "2025-06-11 09:10:00",
    update_time: "2025-06-11 16:20:00"
  },
  {
    id: 8,
    username: "zhouzhiruo",
    password: "123456",
    name: "周芷若",
    gender: "女",
    job: "1",
    entrydate: "2014-11-09",
    dept_id: 1,
    create_time: "2025-06-11 10:20:00",
    update_time: "2025-06-11 09:30:00"
  },
  {
    id: 9,
    username: "dingminjun",
    password: "123456",
    name: "丁敏君",
    gender: "女",
    job: "1",
    entrydate: "2011-03-11",
    dept_id: 1,
    create_time: "2025-06-11 14:30:00",
    update_time: "2025-06-11 11:15:00"
  },
  {
    id: 10,
    username: "zhaomin",
    password: "123456",
    name: "赵敏",
    gender: "女",
    job: "1",
    entrydate: "2013-09-05",
    dept_id: 1,
    create_time: "2025-06-11 09:00:00",
    update_time: "2025-06-11 10:00:00"
  },
  {
    id: 11,
    username: "luzhangke",
    password: "123456",
    name: "鹿杖客",
    gender: "男",
    job: "1",
    entrydate: "2007-02-01",
    dept_id: 1,
    create_time: "2025-06-11 08:30:00",
    update_time: "2025-06-11 15:45:00"
  },
  {
    id: 12,
    username: "hebiweng",
    password: "123456",
    name: "鹤笔翁",
    gender: "男",
    job: "1",
    entrydate: "2008-08-18",
    dept_id: 1,
    create_time: "2025-06-11 09:10:00",
    update_time: "2025-06-11 16:20:00"
  },
  {
    id: 13,
    username: "fangdongbai",
    password: "123456",
    name: "方东白",
    gender: "男",
    job: "2",
    entrydate: "2012-11-01",
    dept_id: 2,
    create_time: "2025-06-11 10:20:00",
    update_time: "2025-06-11 09:30:00"
  },
  {
    id: 14,
    username: "zhangsanfeng",
    password: "123456",
    name: "张三丰",
    gender: "男",
    job: "2",
    entrydate: "2002-08-01",
    dept_id: 2,
    create_time: "2025-06-11 14:30:00",
    update_time: "2025-06-11 11:15:00"
  },
  {
    id: 15,
    username: "yulianzhou",
    password: "123456",
    name: "俞莲舟",
    gender: "男",
    job: "2",
    entrydate: "2011-05-01",
    dept_id: 2,
    create_time: "2025-06-11 09:00:00",
    update_time: "2025-06-11 10:00:00"
  },
  {
    id: 16,
    username: "songyuanqiao",
    password: "123456",
    name: "宋远桥",
    gender: "男",
    job: "2",
    entrydate: "2010-01-01",
    dept_id: 2,
    create_time: "2025-06-11 08:30:00",
    update_time: "2025-06-11 15:45:00"
  },
  {
    id: 17,
    username: "chenyouliang",
    password: "123456",
    name: "陈友谅",
    gender: "男",
    job: null,
    entrydate: "2015-03-21",
    dept_id: null,
    create_time: "2025-06-11 09:10:00",
    update_time: "2025-06-11 16:20:00"
  }
  // 其他员工数据...
]);

// 原始数据备份，用于重置搜索
const originalData = ref([...tableData.value]);

// -------------------- 工具函数 --------------------
const formatDate = (dateString: string): string => {
  if (!dateString) return '-';
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  });
};

const jobTypes: Record<string, string> = {
  '1': '管理岗',
  '2': '技术岗',
  '3': '运营岗',
  '4': '高管'
};

const deptMap: Record<number, string> = {
  1: '技术部',
  2: '运营部',
  3: '市场部'
};

// -------------------- 功能函数 --------------------
const handleSearch = () => {
  if (!data.searchQuery.trim() && !data.selectedDept && !data.selectedJob && !data.selectedGender && !data.dateRange) {
    // 如果所有筛选条件都为空，显示全部数据
    tableData.value = [...originalData.value];
    ElMessage.info('显示所有员工数据');
    return;
  }

  let filteredData = [...originalData.value];

  // 搜索关键词筛选
  if (data.searchQuery.trim()) {
    const searchValue = data.searchQuery.trim();
    if (data.searchType === 'all') {
      filteredData = filteredData.filter(item =>
          item.name.includes(searchValue) ||
          item.username.includes(searchValue) ||
          (jobTypes[item.job as string] || '').includes(searchValue) ||
          (deptMap[item.dept_id as number] || '').includes(searchValue)
      );
    } else if (data.searchType === 'name') {
      filteredData = filteredData.filter(item => item.name.includes(searchValue));
    } else if (data.searchType === 'username') {
      filteredData = filteredData.filter(item => item.username.includes(searchValue));
    } else if (data.searchType === 'job') {
      filteredData = filteredData.filter(item =>
          (jobTypes[item.job as string] || '').includes(searchValue)
      );
    } else if (data.searchType === 'dept') {
      filteredData = filteredData.filter(item =>
          (deptMap[item.dept_id as number] || '').includes(searchValue)
      );
    }
  }

  // 部门筛选
  if (data.selectedDept !== null) {
    filteredData = filteredData.filter(item => item.dept_id === data.selectedDept);
  }

  // 职位筛选
  if (data.selectedJob !== null) {
    filteredData = filteredData.filter(item => item.job === data.selectedJob);
  }

  // 性别筛选
  if (data.selectedGender !== null) {
    filteredData = filteredData.filter(item => item.gender === data.selectedGender);
  }

  // 日期范围筛选
  if (data.dateRange && data.dateRange.length === 2) {
    const [startDate, endDate] = data.dateRange;
    filteredData = filteredData.filter(item => {
      const entryDate = new Date(item.entrydate).getTime();
      const start = new Date(startDate).getTime();
      const end = new Date(endDate).getTime();
      return entryDate >= start && entryDate <= end;
    });
  }

  // 排序
  if (data.sortField && data.sortOrder) {
    filteredData.sort((a, b) => {
      if (a[data.sortField!] < b[data.sortField!]) {
        return data.sortOrder === 'ascending' ? -1 : 1;
      }
      if (a[data.sortField!] > b[data.sortField!]) {
        return data.sortOrder === 'ascending' ? 1 : -1;
      }
      return 0;
    });
  }

  if (filteredData.length === 0) {
    ElMessage.warning('未找到匹配的记录');
  } else {
    tableData.value = filteredData;
    ElMessage.success(`找到 ${filteredData.length} 条记录`);
  }
};

const resetSearch = () => {
  data.searchQuery = '';
  data.searchType = 'all';
  data.isAdvanced = false;
  data.selectedDept = null;
  data.selectedJob = null;
  data.selectedGender = null;
  data.dateRange = null;
  data.sortField = null;
  data.sortOrder = null;
  tableData.value = [...originalData.value];
  ElMessage.info('搜索已重置，显示所有员工数据');
};

const toggleAdvancedSearch = () => {
  data.isAdvanced = !data.isAdvanced;
};

const handleEdit = (row: any) => {
  ElMessage({
    type: 'info',
    message: `编辑员工: ${row.name}`,
    duration: 2000
  });
  console.log('编辑员工', row);
};

const handleDelete = (row: any) => {
  ElMessageBox.confirm(
      `确认删除员工 ${row.name} 吗？此操作不可恢复。`,
      '提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(() => {
    tableData.value = tableData.value.filter(item => item.id !== row.id);
    // 同时更新原始数据
    originalData.value = tableData.value;
    ElMessage.success('删除成功');
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
};

const handleAddUser = () => {
  ElMessage({
    type: 'info',
    message: '新增员工功能',
    duration: 2000
  });
  console.log('新增员工');
};

// 导出报表功能
const exportReport = () => {
  if (tableData.value.length === 0) {
    ElMessage.warning('没有数据可导出');
    return;
  }

  data.isExporting = true;
  data.exportProgress = 0;

  // 模拟导出进度
  const interval = setInterval(() => {
    data.exportProgress += 10;
    if (data.exportProgress >= 100) {
      clearInterval(interval);
      data.isExporting = false;
      ElMessage.success('报表导出成功');
    }
  }, 200);

  // 模拟导出数据
  setTimeout(() => {
    console.log('导出数据:', tableData.value);
  }, 2000);
};

// 分部门查看
const viewByDept = (deptId: number | null) => {
  data.selectedDept = deptId;
  data.searchQuery = '';
  data.selectedJob = null;
  data.selectedGender = null;
  data.dateRange = null;
  handleSearch();
};

// 批量删除功能
const handleBatchDelete = () => {
  if (data.selectedEmployees.length === 0) {
    ElMessage.warning('请先选择要删除的员工');
    return;
  }

  data.batchDeleteMessage = `确认删除选中的 ${data.selectedEmployees.length} 名员工吗？此操作不可恢复。`;
  data.isBatchDeleteVisible = true;
};

const confirmBatchDelete = () => {
  const selectedIds = data.selectedEmployees.map(emp => emp.id);
  tableData.value = tableData.value.filter(emp => !selectedIds.includes(emp.id));
  originalData.value = tableData.value;
  data.selectedEmployees = [];
  data.isBatchDeleteVisible = false;
  ElMessage.success('批量删除成功');
};

// 处理表格排序
const handleSortChange = (column: any, prop: string, order: string) => {
  data.sortField = prop;
  data.sortOrder = order === 'ascending' ? 'ascending' : 'descending';
  handleSearch();
};

// 处理表格选择变化
const handleSelectionChange = (selection: any[]) => {
  data.selectedEmployees = selection;
};

// 监听数据变化，自动更新原始数据
watch(() => tableData.value, (newData) => {
  originalData.value = newData;
}, { deep: true });

// 计算当前筛选条件的摘要
const filterSummary = computed(() => {
  const conditions = [];

  if (data.searchQuery) {
    conditions.push(`${data.searchQuery}(${searchTypes.find(t => t.value === data.searchType)?.label})`);
  }

  if (data.selectedDept !== null) {
    conditions.push(deptOptions.find(d => d.value === data.selectedDept)?.label);
  }

  if (data.selectedJob !== null) {
    conditions.push(jobOptions.find(j => j.value === data.selectedJob)?.label);
  }

  if (data.selectedGender !== null) {
    conditions.push(genderOptions.find(g => g.value === data.selectedGender)?.label);
  }

  if (data.dateRange && data.dateRange.length === 2) {
    const [start, end] = data.dateRange;
    conditions.push(`${start} 至 ${end}`);
  }

  return conditions.join(' · ');
});

onMounted(() => {
  ElMessage({
    type: 'success',
    message: '员工管理系统已加载完成',
    duration: 3000
  });
});
</script>

<template>
  <div class="app-container">
    <!-- 头部区域：标题和操作按钮 -->
    <header class="app-header">
      <h1 class="app-title">
        <User class="header-icon" />
        员工管理系统
      </h1>
      <div class="header-actions">
        <el-button type="primary" @click="handleAddUser">
          <Plus class="action-icon" />
          新增员工
        </el-button>
        <el-button type="success" @click="exportReport" :loading="data.isExporting">
          <Download class="action-icon" />
          导出报表
        </el-button>
        <el-button type="danger" @click="handleBatchDelete" :disabled="data.selectedEmployees.length === 0">
          <Delete class="action-icon" />
          批量删除
        </el-button>
      </div>
    </header>

    <!-- 主内容区域 -->
    <main class="app-main">
      <!-- 部门快速导航 -->
      <div class="dept-navigation">
        <h3 class="dept-title">部门导航</h3>
        <div class="dept-buttons">
          <el-button
              v-for="dept in deptOptions"
              :key="dept.value"
              :type="data.selectedDept === dept.value ? 'primary' : 'default'"
              @click="viewByDept(dept.value)"
              size="small"
          >
            <Users class="dept-icon" />
            {{ dept.label }}
          </el-button>
        </div>
      </div>

      <!-- 筛选条件摘要 -->
      <div v-if="filterSummary" class="filter-summary">
        <el-alert
            title="当前筛选条件: {{ filterSummary }}"
            type="info"
            :closable="true"
            @close="resetSearch"
        >
          <template #extra>
            <el-button type="text" size="mini" @click="resetSearch">
              <RefreshCw class="reset-icon" />
              重置
            </el-button>
          </template>
        </el-alert>
      </div>

      <!-- 表格区域 -->
      <el-card class="table-card" shadow="always">
        <template #header>
          <div class="card-header">
            <h2 class="card-title">
              <FileText class="card-icon" />
              员工数据表格
            </h2>
            <div class="header-actions">
              <el-button
                  type="text"
                  size="small"
                  @click="data.filterVisible = !data.filterVisible"
              >
                <FilterList class="filter-icon" />
                {{ data.filterVisible ? '收起筛选' : '高级筛选' }}
              </el-button>
            </div>
          </div>
        </template>

        <!-- 基础搜索 -->
        <div class="table-search">
          <el-input
              v-model="data.searchQuery"
              placeholder="输入关键词搜索"
              :prefix-icon="Search"
              class="search-input"
              @keyup.enter="handleSearch"
          >
            <template #append>
              <el-select v-model="data.searchType" placeholder="搜索类型" class="search-type-select">
                <el-option v-for="item in searchTypes" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
              <el-button type="primary" class="search-button" @click="handleSearch">
                <Search class="search-button-icon" />
                搜索
              </el-button>
            </template>
          </el-input>

          <el-button class="reset-button" @click="resetSearch">
            <RefreshCw class="reset-button-icon" />
            重置
          </el-button>
        </div>

        <!-- 高级筛选面板 -->
        <div v-show="data.filterVisible" class="advanced-filter-panel">
          <div class="filter-row">
            <el-select
                v-model="data.selectedDept"
                placeholder="选择部门"
                class="filter-select"
            >
              <el-option v-for="dept in deptOptions" :key="dept.value" :label="dept.label" :value="dept.value" />
            </el-select>

            <el-select
                v-model="data.selectedJob"
                placeholder="选择职位"
                class="filter-select"
            >
              <el-option v-for="job in jobOptions" :key="job.value" :label="job.label" :value="job.value" />
            </el-select>

            <el-select
                v-model="data.selectedGender"
                placeholder="选择性别"
                class="filter-select"
            >
              <el-option v-for="gender in genderOptions" :key="gender.value" :label="gender.label" :value="gender.value" />
            </el-select>

            <el-date-picker
                v-model="data.dateRange"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                placeholder="选择入职日期范围"
                class="filter-date"
            >
              <template #prefix>
                <Calendar class="date-icon" />
              </template>
            </el-date-picker>

            <el-button type="primary" @click="handleSearch">
              <Filter class="filter-button-icon" />
              应用筛选
            </el-button>
          </div>
        </div>

        <div class="table-wrapper">
          <el-table
              :data="tableData"
              style="width: 100%"
              stripe
              hover
              class="custom-table"
              @selection-change="handleSelectionChange"
              @sort-change="handleSortChange"
          >
            <el-table-column type="selection" width="55" class="selection-column" />

            <el-table-column prop="id" label="ID" width="80" class="table-column-id" sortable />

            <el-table-column prop="username" label="用户名" width="120" class="table-column-username" sortable />

            <el-table-column prop="name" label="姓名" width="100" class="table-column-name" sortable />

            <el-table-column prop="gender" label="性别" width="80" class="table-column-gender">
              <template #default="scope">
                <el-tag :type="scope.row.gender === '男' ? 'primary' : 'success'">
                  {{ scope.row.gender }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="job" label="职位" width="120" class="table-column-job">
              <template #default="scope">
                <el-tag :type="scope.row.job === '4' ? 'danger' : 'info'">
                  {{ jobTypes[scope.row.job] || '无' }}
                </el-tag>
              </template>
            </el-table-column>

            <el-table-column prop="entrydate" label="入职日期" width="140" class="table-column-entrydate" sortable>
              <template #default="scope">
                {{ formatDate(scope.row.entrydate) }}
              </template>
            </el-table-column>

            <el-table-column prop="dept_id" label="部门" width="120" class="table-column-dept" sortable>
              <template #default="scope">
                {{ deptMap[scope.row.dept_id] || '无' }}
              </template>
            </el-table-column>

            <el-table-column prop="create_time" label="创建时间" width="180" class="table-column-create-time" sortable>
              <template #default="scope">
                {{ formatDate(scope.row.create_time) }}
              </template>
            </el-table-column>

            <el-table-column prop="update_time" label="更新时间" width="180" class="table-column-update-time" sortable>
              <template #default="scope">
                {{ formatDate(scope.row.update_time) }}
              </template>
            </el-table-column>

            <el-table-column label="操作" width="180" class="table-column-actions">
              <template #default="scope">
                <el-button
                    size="mini"
                    type="primary"
                    @click="handleEdit(scope.row)"
                    class="table-action-btn edit-btn"
                >
                  <Edit class="action-icon" />
                  编辑
                </el-button>
                <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.row)"
                    class="table-action-btn delete-btn"
                >
                  <Delete class="action-icon" />
                  删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>

      <!-- 分页区域 -->
      <div class="pagination-container">
        <el-pagination
            v-model:current-page="currentPage4"
            v-model:page-size="pageSize4"
            :page-sizes="[10, 20, 50, 100]"
            :size="size"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="tableData.length"
        />
      </div>
    </main>

    <!-- 批量删除确认对话框 -->
    <el-dialog
        title="批量删除确认"
        :visible.sync="data.isBatchDeleteVisible"
        width="400px"

    >
      <template #content>
        <p>{{ data.batchDeleteMessage }}</p>
      </template>
      <template #footer>
        <el-button @click="data.isBatchDeleteVisible = false">取消</el-button>
        <el-button type="danger" @click="confirmBatchDelete">确认删除</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped>
/* 原有样式保持不变，新增以下样式 */

.app-container {
  max-width: 1920px;
  margin: 0 auto;
  padding: 20px;
  background-color: #f5f7fa;

}

/* 图标样式 */
.header-icon, .action-icon, .dept-icon, .card-icon, .filter-icon, .reset-icon,
.search-button-icon, .reset-button-icon, .filter-button-icon, .date-icon {
  margin-right: 5px;
}

/* 头部区域样式 */
.app-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
  padding-bottom: 15px;
  border-bottom: 2px solid #4775d0;
}

.app-title {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
  display: flex;
  align-items: center;
  gap: 10px;
}

.header-actions {
  display: flex;
  gap: 10px;
}

/* 部门导航样式 */
.dept-navigation {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
}

.dept-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #303133;
}

.dept-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* 筛选条件摘要样式 */
.filter-summary {
  margin-bottom: 20px;
}

/* 表格区域样式 */
.table-card {
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.table-card:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 1px solid #4c74c5;
}

.card-title {
  font-size: 24px;
  font-weight: 700;
  color: #303133;
  margin: 0;
}

/* 搜索区域样式 */
.table-search {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 15px 0;
  padding: 15px;
  background-color: #4c8be8;
  border-radius: 8px;
}

.search-input {
  width: 300px;
  transition: all 0.3s ease;
  flex: 1;
  min-width: 200px;
}

.search-input:focus {
  width: 350px;
  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
}

.search-type-select {
  width: 120px;
  margin-left: 5px;
}

.reset-button {
  margin-left: auto;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* 高级筛选面板样式 */
.advanced-filter-panel {
  margin: 15px 0;
  padding: 15px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: center;
}

.filter-select {
  width: 150px;
}

.filter-date {
  width: 250px;
}

/* 表格样式优化 */
.custom-table th {
  background-color: #f5f7fa;
  font-weight: 600;
  color: #606266;
}

/* 操作按钮样式优化 */
.table-action-btn {
  margin-right: 5px;
  padding: 4px 10px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.table-action-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* 分页区域样式 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

/* 响应式设计优化 */
@media (max-width: 1200px) {
  .app-title {
    font-size: 24px;
  }

  .card-title {
    font-size: 20px;
  }

  .table-search, .filter-row {
    flex-direction: column;
  }

  .reset-button {
    margin-left: 0;
  }

  .filter-select, .filter-date {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .app-title {
    font-size: 20px;
  }

  .card-title {
    font-size: 18px;
  }

  .custom-table th,
  .custom-table td {
    padding: 10px 8px;
    font-size: 14px;
  }

  .table-action-btn {
    padding: 3px 8px;
    font-size: 12px;
  }

  .header-actions {
    flex-direction: column;
    gap: 5px;
  }
}
</style>
